<template>
	<view class="container">
		<navbar :config="config" backColor="#000" :backoff="backoff"></navbar>
		<view class="topStatus" :style="{ top: tabTop + 'px' }" v-if="sureDataAll.is_able_select_self_take">
			<text :class="status == 1 ? 'active' : ''" @click="changeStatus(1)">快递配送</text>
			<text :class="status == 2 ? 'active' : ''" @click="changeStatus(2)">上门自提</text>
		</view>

		<view class="carbox" :class="sureDataAll.is_able_select_self_take ? 'changeTabtwo' : ''">
			<view class="addressBox">
				<view class="" v-if="status == 1">
					<ldaddress :value="sureDataAll.receipt" :link="true"></ldaddress>
				</view>
				<view class="goHome" v-if="status == 2 && sureDataAll.is_able_select_self_take">
					<view class="u-flex-center u-p3040 u-border-one-one">
						<image class="u-avatar104 u-mr25" :src="sureDataAll.self_take_shop.logo" mode=""></image>
						<view class="u-flex1">
							<!-- u-bold -->
							<view class="u-474747 u-font32">{{ sureDataAll.self_take_shop.shop_name }}</view>
							<view class="smallAddress u-mt10">
								<text class="iconfont u-font30 u-mr10 " style="color: #474747;">&#xe611;</text>
								<!-- u-bold -->
								<text class="u-font28 u-474747">
									{{ sureDataAll.self_take_shop.province_name }}{{ sureDataAll.self_take_shop.city_name }}{{ sureDataAll.self_take_shop.area_name
									}}{{ sureDataAll.self_take_shop.address }}
								</text>
							</view>
						</view>
					</view>
					<view class="u-flex-center u-prbl30" style="justify-content: space-around;">
						<view class="u-mr45 u-font28 u-474747 u-flex-center">
							<!-- u-bold -->
							<text class="u-474747">提货人：</text>
							<input style="width: 150rpx;" type="text" value="" @input="userName" maxlength="8"
								placeholder="提货人姓名" placeholder-style="font-size:30rpx;" />
						</view>
						<view class="u-font28 u-474747 u-flex-center">
							<text class="u-mr10 iconfont u-474747 u-font30">&#xe64e;</text>
							<input style="width: 260rpx;" type="number" value="" maxlength="11" @input="userMobile"
								placeholder="提货人手机号" placeholder-style="font-size:30rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="" v-for="(pitem, index) in sureDataAll.shop_orders" :key="pitem.source_shop_id">
				<view class="shopList">
					<ldshop :shopStatus="shopStatus" :hasPlatform="sureDataAll.has_platform"
						:value="pitem.source_shop_name"></ldshop>
					<view v-for="item in pitem.items" :key="item.goods_id">
						<ldgoods :value="item"></ldgoods>
					</view>
				</view>

				<!-- 备注 -->

				<view class="listView">
					<view class="listText">
						<view class="title">

							<span class="title-one">购买备注</span>
							<span class="title-num">{{ pitem.user_remark.length }} / 80</span>
						</view>
						<textarea class="textareaView" :auto-height="true" :maxlength="80"
							@input="textareaText($event, index)" value="" placeholder="给商家留言(选填)" />
					</view>
					<!-- list -->
					<view class="listText" style="border-radius: 0 0 20rpx 20rpx;">
						<!-- <view class="u-border-one-one border u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818"><text>商品金额</text></view>
            <view class="u-font30 u-999">¥ {{ pitem.original_goods_amount }}</view>
          </view> -->
						<!-- border -->
						<view class="youhuiView" v-if="pitem.first_order_activity">
							<view class="u-font28 u-474747">
								<text>首单优惠</text>
								<text
									class="u-font24 u-AAAAAA">（满{{ pitem.first_order_activity.full }}减{{ pitem.first_order_activity.reduction }}）</text>
							</view>
							<view class="u-font30 u-AAAAAA">-¥ {{ pitem.first_order_reduced }}</view>
						</view>
						<!-- class="freight" -->
						<view>
							<view class="youhuiView">
								<view class="youhuiViewOne"><text>运费</text></view>
								<view class="youhuiViewTwo">￥{{ pitem.total_freight }}</view>
							</view>

							<!-- <view class="youhuiView">
							<view class="u-font28 u-474747"><text>惠选专区可随机立减</text></view>
							<view class="u-font28 u-474747">￥ 0.01 ~ 0.5元</view>
						</view> -->
						</view>
						<view class="youhuiView" style="padding-bottom: 19rpx;">
							<view class="youhuiViewOne"><text>消费补贴</text></view>
							<!-- consumption_value -->
							<view class="youhuiViewTwo">
								<!-- <span>{{ $mUtil.isToFixed(pitem.total_consumption_value, 2) }}</span> 贡献值 -->
								<!-- <rich-text :nodes="$mUtil.isToFixed(pitem.total_consumption_value, 2)"></rich-text> -->
								<view>￥{{pitem.total_consumption_value}}</view>
								<view>贡献值</view>
							</view>
						</view>

						<!-- <view class="u-border-one-one border u-p30 u-flex-center-sb">
					<view class="u-font28 u-181818">
						<text>店铺会员折扣({{pitem.user_role_name}})</text>
					</view>
					<view class="u-font30 u-999">
						-¥ {{pitem.discount_amount}}
					</view>
				</view> -->
						<!-- <view class="u-border-one-one u-p30 border u-flex-center-sb">
					<view class="u-font28 u-181818">
						<text>支付金额</text>
					</view>
					<view class="u-font30 u-FF0000 u-bold">
						<rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)" ></rich-text>
					</view>
				</view> -->
						<!-- <view class="u-flex-center pt-pb25" style="justify-content: flex-end;height: 108rpx;padding-right: 28rpx;">
            <view class="">共{{ pitem.goods_num }}件商品，小计：</view>
            <view style="display: flex;align-items: center;">
              <text></text>
              <view class="u-bold u-FF0000">
                <rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)"></rich-text>
              </view>
            </view>
          </view> -->
					</view>
				</view>


			</view>
			<view class="listText u-mt10" v-if="false">
				<view v-if="platformCoupon.my_coupon_id!==0" @click="checkCoupon()"
					class="u-border-one-one u-p30 u-flex-center-sb">
					<view class="u-font28 u-474747"><text>平台优惠</text></view>
					<view v-if="platformCoupon" class="u-font30 u-AAAAAA">
						<text
							style="white-space: nowrap;max-width: 450rpx;overflow: hidden;text-overflow: ellipsis;display: inline-block;vertical-align: middle;">{{platformCoupon.coupon_name}}</text>
						<text
							style="color: red;margin-left: 15rpx;display: inline-block;vertical-align: middle;">-{{platformCoupon.coupon_result_value}}</text>
					</view>
					<view v-else class="u-font30 u-AAAAAA">选择优惠券></view>
				</view>
				<view v-if="sureDataAll.has_platform" class="u-border-one-one u-p30">
					<view class="u-flex-center-sb">
						<view class="u-font28 u-474747"><text>公益积分抵扣</text></view>
						<view class="u-font30 u-AAAAAA">
							<u-switch v-model="usePlatformPoint" @change="changePlatformPoint()"
								active-color='#2DB62B'></u-switch>
						</view>
					</view>
					<view style="color: #474747;font-size: 28rpx;">共计{{sureDataAll.integral_able}}<text
							v-if="usePlatformPoint">，可使用{{sureDataAll.total_point}}抵扣{{sureDataAll.total_point}}元</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="botfixed">
			<view class="botfixedItem">
					<text >共{{ totaltNum }}件,</text>
					<text >合计： </text>
					<view class="botfixedItemRich">
						<rich-text :nodes="$mUtil.priceBigSmallFont16(sureDataAll.total_money, true, 30)">
							
						</rich-text>
					</view>
			</view>
			<view class="submitBtn" @click="submitBtn">
				{{submitText}}
			</view>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
		<!-- 身份验证弹框 -->
		<u-popup v-model="showPopup" @close="closePopup" :round="10" mode="bottom" :closeOnClickOverlay="false">
			<view style="padding: 40rpx;">
				<u-form class="form-box" :model="form" ref="uForm" label-width="156">
					<u-form-item class="usable-input" label="真实姓名">
						<u-input v-model="form.name" placeholder="请输入真实姓名" />
					</u-form-item>
					<u-form-item class="usable-input" label="身份证号">
						<u-input v-model="form.id_card" placeholder="请输入身份证号" :clearable="false" />
					</u-form-item>
				</u-form>
				<view class="rightP u-flex-center u-mt40" @click="submitOrder">
					<view class="submitClass" style="width: 90%;margin: 0 auto;">提交订单</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var app = getApp();
	import ldaddress from '../../../components/ld-address/ld-address.vue';
	import ldshop from '../../../components/ld-shop/ld-shop.vue';
	import ldgoods from '../../../components/ld-goods/ld-goods.vue';
	export default {
		components: {
			ldaddress,
			ldshop,
			ldgoods
		},
		data() {
			return {
				randomReduction: 0,
				shopStatus: false,
				totaltNum: 0,
				tabTop: 0,
				price: 20,
				loading: false,
				status: 1, //快递方式标志
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '确认订单',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#ffffff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				backoff: true,
				sureDataAll: {},
				shopDiscounts: {},
				self_take: {},
				dataJson: {},
				addressChose: false,
				type: null,
				usePlatformPoint: true, //是否使用公益积分抵扣
				// 当前使用的平台优惠券
				platformCoupon: {
					my_coupon_id: 0
				},
				showPopup: false,
				form: {
					name: '',
					id_card: ''
				},
				third: false,
				trade_type_id: null,
				submitText: '提交订单',
				paymentPage: '' // 父页面类型
			};
		},

		onLoad(options) {
			this.loading = true;
			this.third = options.third;
			if (options.paymentPage) {
				this.paymentPage = options.paymentPage;
			}
			if (options.exchangeType) {
				this.exchangeType = options.exchangeType;
			}
			this.trade_type_id = options.trade_type_id;
			this.tabTop = app.globalData.barHeight + 44;
			let dataJson = uni.getStorageSync('dataJson');
			if (this.third && (this.trade_type_id == 1 || this.trade_type_id == 4 || this.trade_type_id == 5)) {
				this.submitText = '提交'
			} else {
				this.submitText = '提交订单'
			} // let sureData = uni.getStorageSync('sureData')
			// this.getByShop(sureDataAll.)

			if (dataJson) {
				this.dataJson = dataJson;
			}
			if (options.type) {
				this.type = options.type;
			}
		},

		onShow() {
			let orderreminder = uni.getStorageSync('orderreminder');
			if (orderreminder) {
				this.$mUtil.toast('已生成待付款订单');
				uni.removeStorageSync('orderreminder');
			}

			let dataJson = uni.getStorageSync('dataJson');
			if (dataJson && !this.addressChose) {
				this.loading = true;
				this.$http
					.post(`/order/build`, {
						...dataJson,
						use_platform_point: this.usePlatformPoint,
						platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
							my_coupon_id: this.platformCoupon.my_coupon_id
						}
					})
					.then(res => {
						if (res && res.code == 200) {
							this.randomReduction = res.data.random_reduction;
							console.log(this.randomReduction);
							this.loading = false;
							uni.setStorageSync('sureData', res.data);
							if (res.data) {
								this.sureDataAll = res.data;
								let totaltNum = 0;
								res.data.shop_orders.forEach(res => {
									totaltNum += res.goods_num;
								});
								this.sureData = res.data;
								this.totaltNum = totaltNum;
							}
							//平台店铺才能使用公益积分抵扣
							if (!res.data.has_platform) {
								this.usePlatformPoint = false;
							}
							//默认使用的平台优惠券
							if (res.data.platform_coupon.my_coupon_id != 0) {
								this.platformCoupon = res.data.platform_coupon;
							}
						}
					})
					.catch(() => {
						uni.hideLoading();
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			changePlatformPoint() {
				let dataJson = uni.getStorageSync('dataJson');
				if (dataJson) {
					this.postData(dataJson);
				}
			},
			// 身份验证弹框
			submitOrder() {
				if (!this.form.name) {
					this.$mUtil.toast('请填写真实姓名')
					return false
				}
				if (!
					/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
					.test(this.form.id_card)) {
					this.$mUtil.toast('请检查身份证号')
					return false
				}
				this.dataJson.realName = this.form.name;
				this.dataJson.idNo = this.form.id_card;
				this.dataJson.real_name = this.dataJson.realName;
				this.dataJson.id_no = this.dataJson.idNo;
				this.dataJson.random_reduction = this.randomReduction;
				this.orderCreated();
			},
			closePopup() {
				this.showPopup = false;
			},
			//提交订单
			submitBtn() {
				if (this.status == 1) {
					//快速配送
					this.dataJson.self_take = null;

					if (this.dataJson.receipt_id == null && !this.sureDataAll.receipt.id) {
						this.$mUtil.toast('请填写收货地址');
						return false;
					}
					if (this.third && (this.trade_type_id == 1 || this.trade_type_id == 4 || this.trade_type_id == 5)) {
						this.showPopup = true;
					} else {
						this.orderCreated();
					}
				} else {
					//自提
					if (!this.self_take.receiver) {
						this.$mUtil.toast('请填写提货人姓名');
						return false;
					}
					if (!this.self_take.mobile) {
						this.$mUtil.toast('请填写提货人手机号');
						return false;
					}
					if (!this.self_take.mobile.match(this.$mConfig.telRegex)) {
						this.$mUtil.toast('请输入正确手机号');
						return false;
					}
					this.dataJson.self_take = this.self_take;
					if (this.third && (this.trade_type_id == 1 || this.trade_type_id == 4 || this.trade_type_id == 5)) {
						this.showPopup = true;
					} else {
						this.orderCreated();
					}
				}
			},
			orderCreated() {
				this.$http.post('/order/create', {
						...this.dataJson,
						use_platform_point: this.usePlatformPoint,
						platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
							my_coupon_id: this.platformCoupon.my_coupon_id
						}
					})
					.then(res => {
						this.loading = false;
						if (res && res.code == 200) {
							let target = res.data;
							if (target.payment_status == 5) {
								uni.reLaunch({
									url: `/pages/order/orderList/orderList?orderType=${this.sureDataAll.area_feature==3?3:0}`
								});
								return false;
							} else {
								uni.navigateTo({
									url: '../../order/pay?id=' + target.id + '&total_amount=' + target
										.total_amount +
										'&expired_pay_time=' + target.expired_pay_time + '&type=' + this.type +
										'&paymentPage=' + this.paymentPage + '&exchangeType=' + this
										.exchangeType
								});
							}
						}
					});
			},
			userName(e) {
				if (this.status == 2) {
					this.self_take.receiver = e.detail.value;
				}
			},
			userMobile(e) {
				if (this.status == 2) {
					this.self_take.mobile = e.detail.value;
				}
			},
			textareaText(e, index) {
				this.dataJson.shop_orders.map((v, i) => {
					if (i == index) {
						v.user_remark = e.detail.value;
						this.sureDataAll.shop_orders[i].user_remark = e.detail.value;
					}
				});
			},
			//店铺优惠查询
			getByShop(id) {
				this.$http.get('/marketing/firstOrder/getByShop/' + id).then(res => {
					if (res && res.code == 200) {
						this.shopDiscounts = res.data;
					}
				});
			},
			//选完地址回选
			otherFun(object) {
				this.addressChose = true;
				if (!!object) {
					let dataJson = uni.getStorageSync('dataJson');
					dataJson.receipt_id = object.addressid;
					this.dataJson = dataJson;
					this.postData(dataJson);
				}
			},
			postData(dataJson) {
				this.$http
					.post(`/order/build`, {
						...dataJson,
						use_platform_point: this.usePlatformPoint,
						platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
							my_coupon_id: this.platformCoupon.my_coupon_id
						}
					})
					.then(res => {
						if (res && res.code == 200) {
							uni.setStorageSync('sureData', res.data);
							this.sureDataAll = res.data;
							let totaltNum = 0;
							res.data.shop_orders.forEach(res => {
								totaltNum += res.goods_num;
							});
							this.totaltNum = totaltNum;
							if (!res.data.has_platform) {
								this.usePlatformPoint = false;
							}
						}
					});
			},
			changeStatus(val) {
				this.status = val;
				if (val == 1) {
					this.dataJson.shipment_mode = 0;
				} else {
					this.dataJson.shipment_mode = 1;
				}
				this.postData(this.dataJson);
			},
			//选择优惠券
			checkCoupon() {
				let params = {
					marketing_type: this.sureDataAll.marketing_type,
					total_amount_dec_shop_coupon: this.sureDataAll.total_amount_dec_shop_coupon, // 支付总金额
					shop_order_list: this.sureDataAll.shop_orders.map(item => {
						return {
							total_amount_dec_shop_coupon: item
								.total_amount_dec_shop_coupon, //不含运费，扣出首单，扣除店铺优惠券的费用
							shop_id: item.shop_id // 店铺id
						}
					})
				}
				uni.navigateTo({
					url: `/pages/couponCenter/index?isCheck=true&couponId=${this.platformCoupon.my_coupon_id}&checkParams=${JSON.stringify(params)}`
				})
			},
			// 优惠券发生变动
			changeCoupon(platformCoupon) {
				this.platformCoupon = platformCoupon;
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.container {
		border-radius: 40rpx;

		/deep/ .courierAddress {
			background-color: #fff;
			width: 712rpx;
			height: 177rpx;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			margin: 19rpx;
		}
	}

	/deep/ .input-placeholder {
		font-size: 26rpx;
	}

	.border {
		// border-bottom: 3rpx solid #e7e7e7;
	}

	.textarea {
		width: 100%;
		height: 80rpx;
		background-color: #fafafa;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		border: 1rpx solid #ededed;
		border-radius: 20rpx;
	}

	.topStatus {
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		z-index: 9;

		width: 100%;
		box-sizing: border-box;

		text {
			line-height: 100rpx;
			position: relative;
		}

		.active {
			font-weight: bold;
			color: #FF721B;
		}

		.active:after {
			width: 100%;
			height: 2px;
			background-color: #FF721B;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.goHome,
	.listText {
		background-color: #fff;
		// border-radius: 40rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 19rpx;
			padding-top: 19rpx;

			.title-one {
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 31rpx;
			}

			.title-num {
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 31rpx;
			}
		}

		// .freight {
		//   padding: 0 42rpx;


		// }
		.u-border-one-one {
			padding: 0 42rpx 30rpx 42rpx;
		}

		.consumption_value-icon {
			font-size: 40rpx;
			color: #FF721B;
		}

		.consumption_value span {
			color: #FF721B;
		}
	}

	.btnview {
		width: 300rpx;
		margin: 30rpx auto 0;
	}

	.carbox {
		.addressBox {}

		.shopList {
			width: 712rpx;
			height: 323rpx;
			background: #FFFFFF;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			margin-left: 19rpx;
			margin-bottom: 19rpx;
		}
	}

	.changeTabtwo {
		padding: 130rpx 0 160rpx 0;
	}

	.rightText {
		justify-content: space-between;
		height: 200rpx;
	}

	.bottext,
	.botPrice {
		width: 100%;
	}

	.bottext {
		margin-top: 36rpx;
	}

	.rightAddRes {
		width: 172rpx;
		height: 50rpx;
		border-radius: 8rpx;
		border: 1px solid #e5e5e5;

		.centertext {
			text-align: center;
		}

		.btnTag {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #dedede;
			font-size: 46rpx;
			color: #888;
		}
	}

	.btnWidth {
		width: 200rpx;
		background: #FF721B;
	}

	.botfixed {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		box-sizing: border-box;
		width: 750rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding:0 38rpx;
	}

	.listView {
		width: 712rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-left: 19rpx;
	}

	.textareaView {
		width: 673rpx;
		height: 88rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 31rpx 19rpx;
		margin: 19rpx;
		box-sizing: border-box;
	}

	.youhuiView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 19rpx;
		margin-top: 19rpx;
	}

	.youhuiViewOne {
		font-size: 27rpx;
		color: #333333;
		line-height: 31rpx;
	}

	.youhuiViewTwo {
		font-weight: 600;
		font-size: 27rpx;
		color: #333333;
		line-height: 31rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.youhuiViewTwo view:nth-child(1) {
		font-weight: 600;
		font-size: 27rpx;
		color: #FF211F;
		line-height: 31rpx;
	}

	.youhuiViewTwo view:nth-child(2) {
		font-weight: 600;
		font-size: 27rpx;
		color: #999999;
		line-height: 31rpx;
		margin-left: 19rpx;
	}
	.botfixedItem{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
	}
	.botfixedItemRich{
		font-weight: 600;
		font-size: 38rpx;
		color: #FF211F;
		line-height: 38rpx;
	}
	.submitBtn{
		width: 192rpx;
		height: 85rpx;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
	}
	.submitClass{
		width: 673rpx;
		height: 88rpx;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 29rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>